<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>幻灯片预览</title>
	<style>
		*{padding:0;margin:0;}
		#big{
			border:5px solid black;
			position:absolute;
			left:0;
			top:0;
		}
		#small{
			position:absolute;
			left:20px;
			top:255px;

		}
		#small img{
			float:left;
			width:80px;
		}
	</style>
</head>
<body>
	<div id="content" >
		<div id="big" >
				<img src="./images/11.jpg" class="bimgs" style="display:block" >
				<img src="./images/22.jpg" class="bimgs" style="display:none" >
				<img src="./images/33.jpg" class="bimgs" style="display:none" >
				<img src="./images/44.jpg" class="bimgs" style="display:none" >
				<img src="./images/55.jpg" class="bimgs" style="display:none" >
		</div>
		<div id="small" >
			<img src="./images/11.jpg" class="simgs" onmouseover="func(0)" >
			<img src="./images/22.jpg" class="simgs" onmouseover="func(1)" >
			<img src="./images/33.jpg" class="simgs" onmouseover="func(2)" >
			<img src="./images/44.jpg" class="simgs" onmouseover="func(3)" >
			<img src="./images/55.jpg" class="simgs" onmouseover="func(4)" >
		</div>
	</div>
</body>
	<script>
		bimgs = document.getElementsByClassName("bimgs");
		simgs = document.getElementsByClassName("simgs");
		content = document.getElementById("content");
		m=0;
		mytime=null;
		function show(){
			m++;
			if(m==5){
				m=0;
			}
			for(var i=0;i<bimgs.length;i++){
				if(i==m){
					bimgs[i].style.display="block";
				}else{
					bimgs[i].style.display="none";
				}
			}
		}

		mytime=setInterval(show,1000);

		content.onmouseover=function(){
			clearInterval(mytime);
			mytime=null;
		}
			function func(s){
				for(var i=0;i<simgs.length;i++){
					if(i==s){
						bimgs[i].style.display="block";
					}else{
						bimgs[i].style.display="none";
					}
				}
			}

		content.onmouseout=function(){
			if(mytime==null){
				mytime = setInterval(show,1000);
			}
		}




	</script>
</html>